<template>
  <el-form ref="ruleFormRef" :inline="true" :model="selectData">
    <el-form-item label="标题" prop="id">
      <el-input
        v-model="selectData.id"
        autocomplete="off"
        placeholder="请输入"
      />
    </el-form-item>
    <el-form-item label="详情" prop="title">
      <el-input v-model="selectData.title" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="分数" prop="score">
      <el-select v-model="selectData.score" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
    <el-form-item style="float: right">
      <el-button type="primary" @click="isDialog = true"
        ><el-icon><Plus /></el-icon> 新增
      </el-button>
    </el-form-item>
  </el-form>
  <el-table :data="dataList.list" border style="width: 100%">
    <!-- <el-table-column prop="id" label="ID" width="180">
      <template #default="scope">
        {{ scope.$index }}
      </template>
    </el-table-column> -->
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="user" label="user" width="180" />
    <el-table-column prop="score" label="分数" width="180" />
    <el-table-column prop="title" label="详情" width="180" />
    <el-table-column prop="image" label="图片">
      <template #default="scope">
        {{ scope.row }}
        <!-- <img src="https://www.dmoe.cc/random.php"  style="width: 100px; height: 100px;" alt="" /> -->
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="scope">
        <el-button link type="primary" @click="editList(scope.row)"
          >编辑</el-button
        >
        <el-button link type="primary">详情</el-button>
        <el-button link type="primary" @click="remove(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="selectData.page"
    v-model:page-size="selectData.pagesize"
    :page-sizes="[5, 10, 20, 50, 100]"
    layout="sizes, prev, pager, next"
    :total="selectData.count"
    @size-change="sizeChsnge"
    @current-change="currentChange"
    style="float: right"
  />
  <AddList
    :isDialog="isDialog"
    :closeDialog="closeDialog"
    :options="options"
    :addList="addList"
    :formDtata="formDtata"
  ></AddList>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  computed,
  ref,
} from "vue";
import { tableList } from "@/request/api";
import { Ilists, Ilist, IselectOptions } from "@/type/lists";
import { setList, getList } from "@/utils/localStorage";
import { Plus } from "@element-plus/icons-vue";
import type { FormInstance } from "element-plus";
import AddList from "@/components/AddList.vue";
export default defineComponent({
  name: "ListView",
  setup() {
    const ruleFormRef = ref<FormInstance>();
    let person = reactive(new Ilists());
    let isDialog = ref<boolean>(false);
    /* 赋初始值 */
    let listData: Ilist[] = [];
    let formDtata = ref({});

    /* 列表数据 */
    let dataList = reactive({
      list: computed(() => {
        return person.list.slice(
          (person.selectData.page - 1) * person.selectData.pagesize,
          person.selectData.page * person.selectData.pagesize
        );
      }),
    });
    /* 搜索事件 */
    const onSubmit = () => {
      let arr: Ilist[] = [];
      if (
        person.selectData.id ||
        person.selectData.score ||
        person.selectData.title
      ) {
        /* 筛选user */
        if (person.selectData.id) {
          console.log("id");

          arr = listData.filter((i) => {
            return i.user.indexOf(person.selectData.id) !== -1;
          });
        }
        /* 筛选分数 */
        if (person.selectData.score) {
          console.log("score");

          arr = listData.filter((i) => {
            return i.score.toString() === person.selectData.score;
          });
        }
        /* 筛选详情 */
        if (person.selectData.title) {
          console.log("title");

          arr = listData.filter((i) => {
            return i.title.includes(person.selectData.title);
          });
        }
      } else {
        arr = listData;
      }
      person.selectData.count = arr.length;
      person.list = arr;
    };
    /* 重置事件 */
    const resetForm = (formEl?: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };
    /* 页面条数切换 */
    const sizeChsnge = (pagesize: number) => {
      person.selectData.pagesize = pagesize;
    };
    /* 页面切换 */
    const currentChange = (size: number) => {
      person.selectData.page = size;
    };
    /* 删除数据 */
    const remove = (id: string) => {
      person.list = person.list.filter((i) => {
        return i.id !== id;
      });
      setList(JSON.stringify(person.list));
    };
    /* 关闭弹窗 */
    const closeDialog = () => {
      isDialog.value = false;
    };
    /* 新增、修改数据 */
    const addList = (val: any) => {
      isDialog.value = false;
      if (
        !person.list.some((i) => {
          return i.id === val.id;
        })
      ) {
        /* 新增 */
        person.list.unshift({ id: new Date().getTime(), ...val });
      } else {
        /* 修改 */
        formDtata.value = {};
        let index = person.list.findIndex((i) => {
          return i.id === val.id;
        });
        person.list.splice(index, index + 1, { ...val });
      }
      // setList(JSON.stringify(person.list));
    };

    /* 编辑按钮 */
    const editList = (val: any) => {
      formDtata.value = val;
      isDialog.value = true;
    };
    onMounted(async () => {
      function contOptions() {
        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        let newArr: IselectOptions[] = [];
        arr.map((i) => {
          newArr.push({ value: i.toString(), label: i.toString() });
        });
        // newArr.push({ value: "0", label: "全部" });
        return newArr;
      }
      person.options = contOptions();

      if (getList()) {
        person.list = listData = JSON.parse(getList());
        person.selectData.count = JSON.parse(getList()).length;
      } else {
        try {
          const { data } = await tableList();
          person.list = listData = data.data.result;
          person.selectData.count = data.data.totalCount;
        } catch (err) {
          console.log(err);
          return err;
        }
      }
    });
    return {
      ruleFormRef,
      ...toRefs(person),
      onSubmit,
      sizeChsnge,
      currentChange,
      dataList,
      resetForm,
      remove,
      isDialog,
      closeDialog,
      addList,
      editList,
      formDtata,
    };
  },
  components: { AddList, Plus },
});
</script>

<style lang="scss" scoped>
</style>
